<template>
	<div class="detail-skeleton-loading">
		<skeleton-loading>
			<row>
				<square-skeleton 
						:boxProperties="{
								height: 'calc(100vw * 9 / 16)'
						}"
				>
				</square-skeleton>
			</row>
			<div style="padding: 0 16px;">
				<row>
					<column :span="4">
							<square-skeleton 
									:boxProperties="{
											top: '14px',
											width: '100%',
											height: '15px',
											bottom: '14px'
									}"
							>
							</square-skeleton>
					</column>
					<column :span="4" :gutter="10">
							<square-skeleton 
									:boxProperties="{
											top: '14px',
											width: '100%',
											height: '15px',
											bottom: '14px'
									}"
							>
							</square-skeleton>
					</column>
					<column :span="4" :gutter="10">
							<square-skeleton 
									:boxProperties="{
											top: '14px',
											width: '100%',
											height: '15px',
											bottom: '14px'
									}"
							>
							</square-skeleton>
					</column>
					<column :span="4" :gutter="10">
							<square-skeleton 
									:boxProperties="{
											top: '14px',
											width: '100%',
											height: '15px',
											bottom: '14px'
									}"
							>
							</square-skeleton>
					</column>
					<column :span="4" :gutter="10">
							<square-skeleton 
									:boxProperties="{
											top: '14px',
											width: '100%',
											height: '15px',
											bottom: '14px'
									}"
							>
							</square-skeleton>
					</column>
				</row>
			</div>
			<div style="padding: 0 16px;">
				<row>
					<square-skeleton 
							:boxProperties="{
									height: '24rem'
							}"
					>
					</square-skeleton>
				</row>
			</div>
		</skeleton-loading>
	</div>
</template>

<script>
	export default{
		name:'DetialSkeletonLoading'
	}
</script>

<style>
</style>
